<template>
  <div class="app-container">
    <!-- 表单 -->
    <el-form
      :inline="true"
      :model="formInline"
      ref="formInline"
      class="demo-form-inline"
      size="mini"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input
          v-model="formInline.user"
          placeholder="请输入标题名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="formInline.status"
          placeholder="请选择"
          style="width:90px"
        >
          <el-option
            :label="item.title"
            :value="item.val"
            v-for="item in options"
            :key="item.val"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findList" icon="el-icon-search"
          >查询</el-button
        >
        <el-button @click="resetForm" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="title" label="文章标题" align="center">
      </el-table-column>
      <el-table-column prop="viewCount" label="浏览数" align="center">
      </el-table-column>
      <el-table-column prop="thumhup" label="点赞数" align="center">
      </el-table-column>
      <el-table-column prop="ispublic" label="是否公开" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 ? 'danger ' : 'success'">{{
            scope.row.status == 0 ? "不公开" : "公开"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | isType">{{
            scope.row.status | isStatus
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateDate" label="最后更新时间" align="center">
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button size="mini" @click="findItem(scope.row.id)"
            >查看</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="findItem(scope.row.id, true)"
            >审核</el-button
          >
          <el-button size="mini" type="danger" @click="delItem(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看和审核 弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="60%">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题:" prop="title">
          <el-input v-model="ruleForm.title" readonly></el-input>
        </el-form-item>
        <el-form-item label="标签:" prop="label">
          <el-input v-model="label" disabled></el-input>
        </el-form-item>
        <el-form-item label="主图:" prop="imageUrl">
          <img :src="ruleForm.imageUrl" alt="" />
        </el-form-item>
        <el-form-item label="状态" prop="ispublic">
          <el-radio v-model="ruleForm.ispublic" :label="0" disabled
            >不公开</el-radio
          >
          <el-radio v-model="ruleForm.ispublic" :label="1" disabled
            >公开</el-radio
          >
        </el-form-item>
        <el-form-item label="简介" prop="summary">
          <el-input
            type="textarea"
            v-model="ruleForm.summary"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="mdContent">
          <el-input
            type="textarea"
            v-model="ruleForm.mdContent"
            readonly
          ></el-input>
        </el-form-item>
        <el-form-item v-if="dialogTitle == '审核文章'">
          <el-button type="primary" @click="auditSuccessItem"
            >审核通过</el-button
          >
          <el-button @click="auditFailItem">审核不通过</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import api from "@/api/article";
let that;

export default {
  data() {
    return {
      formInline: {
        user: "",
        status: "",
      },
      options: [
        { val: 0, title: "未审核", type: "primary" },
        { val: 1, title: "审核通过", type: "success" },
        { val: 2, title: "审核未通过", type: "warning" },
        { val: 3, title: "已删除", type: "danger" }
      ],
      tableData: [],
      current: 1,
      size: 20,
      total: 0,
      dialogTitle: "",
      dialogVisible: false,
      ruleForm: {},
      label: "",
      id: ""
    };
  },
  methods: {
    // 获取列表数据
    getList() {
      api.getList(this.formInline, this.current, this.size).then(response => {
        if (response.code == 20000) {
          this.tableData = response.data.records;
          this.total = response.data.total;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getList();
    },
    // 查询
    findList() {
      this.getList();
    },
    // 重置
    resetForm() {
      this.$refs.formInline.resetFields();
      this.getList();
    },
    // 查询单个
    findItem(id, show) {
      this.id = id;
      api.findItem(id).then(response => {
        this.dialogVisible = true;
        if (show) {
          this.dialogTitle = "审核文章";
        } else this.dialogTitle = "查看";
        if (response.code == 20000) {
          this.getLabelList();
          this.ruleForm = response.data;
        }
      });
    },
    // 获取分类标签列表
    getLabelList() {
      // 获取分类标签列表
      api.getLabelList().then(response => {
        if (response.code == 20000) {
          this.label = response.data.map(item => item.name).join("/");
        }
      });
    },
    // 审核通过
    auditSuccessItem() {
      api.auditSuccessItem(this.id).then(response => {
        if (response.code == 20000) {
          this.dialogVisible = false;
          this.$message.success("审核通过");
          this.getList();
        }
      });
    },
    // 审核不通过
    auditFailItem() {
      api.auditFailItem(this.id).then(response => {
        if (response.code == 20000) {
          this.dialogVisible = false;
          this.$message.success("审核未通过");
          this.getList();
        }
      });
    },
    // 删除
    delItem(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          api.delItem(id).then(response => {
            if (response.code == 20000) {
              this.$message.success(response.message);
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  filters: {
    // 状态过滤器
    isStatus(e) {
      return that.options.find(item => item.val == e).title;
    },
    // 状态类型滤器
    isType(e) {
      return that.options.find(item => item.val == e).type;
    }
  },
  created() {
    this.getList();
    // 为过滤器存储   this
    that = this;
  }
};
</script>

<style lang="scss" scoped>
img {
  width: 178px;
  height: 178px;
}
</style>
